<template>
  <div class="app-container">

    <u-page title="升级记录">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="升级类型" prop="uporde">
            <el-select v-model="listQuery.uporde" placeholder="选择类型" clearable class="upgrade">
              <el-option v-for="item in upordeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="卡号" prop="card_no">
            <el-input v-model="listQuery.card_no" placeholder="请输入卡号" clearable style="width: 170px" />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="listQuery.mobile" placeholder="请输入手机号" clearable style="width: 180px" maxlength="11" show-word-limit />
          </el-form-item>
          <el-form-item label="原卡类型" prop="fromcardtype">
            <level v-model="listQuery.fromcardtype" />
          </el-form-item>
          <el-form-item label="目标卡类型" prop="tocardtype">
            <level v-model="listQuery.tocardtype" />
          </el-form-item>
          <el-form-item label="操作人" prop="input_pern">
            <el-input v-model="listQuery.input_pern" placeholder="请输入操作人" clearable />
          </el-form-item>
          <el-form-item label="操作时间" prop="creatDate">
            <u-date-time-picker v-model="searchDate" @change="changeDate" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
            <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        row-key="index"
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
      </u-table>

    </u-page>

  </div>
</template>
<script>

import level from '@/components/member/level'
export default {
  components: {
    level
  },
  data() {
    return {
      api: this.$u.api.MemberUpgrade,
      // 表格
      columns: [
        {
          prop: 'uporde',
          label: '升级类型',
          render: (h, params) => {
            const { uporde, uporde_name } = params.row
            let type
            if (uporde === 0) {
              type = 'danger'
            } else if (uporde === 1) {
              type = 'success'
            } else {
              type = 'warning'
            }

            return h('el-tag', { props: { type }}, uporde_name)
          }
        },
        {
          prop: 'card_no',
          label: '卡号'
        },
        {
          prop: 'mobile',
          label: '手机号'
        },
        {
          prop: 'from_card_name',
          label: '原卡类型'
        },
        {
          prop: 'to_card_name',
          label: '目标卡类型'
        },
        {
          prop: 'rule_id',
          label: '规则类型'
        },
        {
          prop: 'input_pern',
          label: '操作人'
        },
        {
          prop: 'input_date',
          label: '操作时间',
          width: '140'
        },
        {
          prop: 'audit_pern',
          label: '审计人'
        },
        {
          prop: 'audit_date',
          label: '审计时间',
          width: '140'
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            if (params.row.status > 0) {
              return h('el-tag', { props: { type: 'success' }}, '已审核')
            } else {
              return h('el-tag', { props: { type: 'danger' }}, '待审核')
            }
          }
        },
        {
          prop: 'remarks',
          label: '备注'
        }
      ],

      list: [],
      listLoading: false,
      listOptions: {
        mutiSelect: true
      },
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        uporde: '',
        card_no: '',
        fromcardtype: '',
        tocardtype: '',
        input_pern: '',
        beginTime: '',
        endTime: ''
      },
      // 获取操作时间范围
      searchDate: [],
      upordeList: [{ value: 1, label: '升级' }, { value: 0, label: '降级' }]
    }
  },
  methods: {
    /**
     * 获取列表数据
     */
    hdlList() {
      const self = this
      // 打开加载状态
      self.listLoading = true

      // 查询分页数据
      self.api.list(self.listQuery).then(res => {
        // 获取分页列表数据
        self.list = res.data.list
        // 获取分页数据,总页数
        self.listQuery.totalCount = res.data.totalCount

        // fix:修复ID重复的问题,设置table表格key值必须唯一
        self.list.forEach((item, index) => {
          self.list[index].index = index
        })

        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    },
    // 时间格式转换
    changeDate(item) {
      if (item) {
        this.listQuery.beginTime = item[0]
        this.listQuery.endTime = item[1]
      } else {
        this.listQuery.beginTime = ''
        this.listQuery.endTime = ''
      }
    },
    // 导出数据
    handleDownload() {
      // 复制值
      const list = this.$u.deepClone(this.list)
      // 业务数据处理
      list.forEach(item => {
        this.$set(item, 'status', item.status === 1 ? '已审核' : '未审核')
      })
      console.log(list)
      // 表头&表数据
      const tHeader = ['升级类型', '卡号', '手机号', '原卡类型', '目标卡类型', '规则类型', '操作人', '操作时间', '审计人', '审计时间', '状态', '备注']
      const filterVal = ['uporde_name', 'card_no', 'mobile', 'from_card_name', 'to_card_name', 'rule_id', 'input_pern', 'input_date', 'audit_pern', 'audit_date', 'status', 'remarks']
      const data = list.map(v => filterVal.map(j => { return v[j] }))
      this.$u.exports.excel('升级记录', tHeader, data)
    }
  }
}
</script>
<style lang="scss" scoped>
  ::v-deep{

    .upgrade{
      display: inline-block;
      margin-right: -5px;
      .el-input{
        width:120px !important;
      }
      .el-input__inner{
        width:120px !important;
      }
      .el-input--suffix .el-input__inner{
        width:120px !important;
      }
      .el-input__icon{
        height:100%;
      }
    }
  }
</style>
